<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"></meta>
    <title>Goldfish's ChatRoom</title>
</head>
<body>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">

<div id="root" class="row-cols-1">
    <h1>Sent Messages</h1>
    <table class="table table-light">
        <tr>
            <td>message</td>
        </tr>
        <tr th:each="message : ${messages}">
            <td th:text="${message}"></td>
        </tr>
    </table>
    <!--    button to send message-->
    <form action="/" method="post">
        <fieldset>
            <legend>ChatRoom</legend>
            <label for="message_box">Message:<br>
                <input id="message_box" type="text" name="message"/>
            </label>
            <button type="submit">Send</button>
        </fieldset>
    </form>
    <!--    button to manage network services-->
    <form action="/info" method="post">
        <fieldset>
            <legend>Network Management</legend>
            <label for="password" th:text="${password_prompt}"/><br>
            <input id="password" type="password" name="password"/>

            <button type="submit">Send</button>
        </fieldset>
    </form>
    <div id="enter_service" class="summary">
        <h1>Authorized?</h1>
        <!--        The user is already authorized.-->
        <a href="/info">Enter</a>
        <h3>or <a href="/">refresh</a></h3>
    </div>
</div>
</body>
</html>